<template>
  <sweet-radio-group v-model="size">
    <sweet-radio label="large">Large</sweet-radio>
    <sweet-radio>Default</sweet-radio>
    <sweet-radio label="small">Small</sweet-radio>
  </sweet-radio-group>

  <sweet-descriptions title="Vertical list with border" direction="vertical" :column="4" :size="size" border>
    <sweet-descriptions-item label="Username">kooriookami</sweet-descriptions-item>
    <sweet-descriptions-item label="Telephone">18100000000</sweet-descriptions-item>
    <sweet-descriptions-item label="Place" :span="2">Suzhou</sweet-descriptions-item>
    <sweet-descriptions-item label="Remarks">
      <sweet-tag size="small">School</sweet-tag>
    </sweet-descriptions-item>
    <sweet-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </sweet-descriptions-item>
  </sweet-descriptions>

  <sweet-descriptions title="Vertical list without border" :column="4" :size="size" direction="vertical" :style="blockMargin">
    <sweet-descriptions-item label="Username">kooriookami</sweet-descriptions-item>
    <sweet-descriptions-item label="Telephone">18100000000</sweet-descriptions-item>
    <sweet-descriptions-item label="Place" :span="2">Suzhou</sweet-descriptions-item>
    <sweet-descriptions-item label="Remarks">
      <sweet-tag size="small">School</sweet-tag>
    </sweet-descriptions-item>
    <sweet-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </sweet-descriptions-item>
  </sweet-descriptions>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';

const size = ref('');
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px'
  };
  return {
    marginTop: marginMap[size.value] || marginMap.default
  };
});
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
</style>
